/* 會員帳號選擇 */
.account-select { width: 6.8rem; -webkit-border-bottom-left-radius: .1rem; border-bottom-left-radius: .1rem; -webkit-border-bottom-right-radius: .1rem; border-bottom-right-radius: .1rem; overflow: hidden; }
.account-list { padding-top: .1rem; padding-bottom: .2rem; }
.account-list > li { overflow: hidden; }
.account-list > li > input { position: absolute; top: -100%; left: -100%; z-index: -9; opacity: 0; }
.account-list > li > label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-height: .6rem; padding: .1rem .2rem; margin-left: -0.1rem; margin-right: -0.1rem; color: #333; font-size: .24rem; line-height: 1.4; -webkit-transition: color .2s, background-color .2s, -webkit-transform .3s; transition: color .2s, background-color .2s, -webkit-transform .3s; -o-transition: color .2s, background-color .2s, transform .3s; transition: color .2s, background-color .2s, transform .3s; transition: color .2s, background-color .2s, transform .3s, -webkit-transform .3s; cursor: pointer; }
.account-list > li > label::before {
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-width: .26rem;
    min-height: .26rem;
    border: 2px solid currentColor;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    margin-right: .1rem;
    background: url('') center no-repeat;
    -webkit-background-size: .12rem auto;
            background-size: .12rem auto;
    }
.account-list > li > label:hover,
.account-list > li > label:active { -webkit-transform: translateX(.1rem); -ms-transform: translateX(.1rem); transform: translateX(.1rem); }
.account-list > li > input:disabled + label { color: #c1c1c1; background-color: #fff; cursor: not-allowed; -webkit-transform: none; -ms-transform: none; transform: none; }
.account-list > li > input:disabled + label::before { background-image:url(''); -webkit-background-size: .1rem auto; background-size: .1rem auto; }
.account-list > li > input:checked + label { -webkit-transform: translateX(.1rem); -ms-transform: translateX(.1rem); transform: translateX(.1rem); }
.account-list > li > input:checked + label { color: #fff; background-color: #3c359f; }
.account-list > li > input:checked + label::before { background-image:url(''); }
.account-menu { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.account-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-top: 1px solid #eee;
    }
.account-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 0;
    margin: auto;
    border-left: 1px solid #eee;
    }
.account-menu > button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 50%; height: .82rem; -webkit-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; color: #333; font-size: .22rem; background: none; -webkit-transition: background-color .2s, color .2s; -o-transition: background-color .2s, color .2s; transition: background-color .2s, color .2s; }
.account-menu > button::before {
    content: '';
    display: block;
    width: .2rem;
    height: inherit;
    margin-right: .1rem;
    background: center no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
    }
.account-menu > button.add::before { background-image: url(''); }
.account-menu > button:hover,
.account-menu > button:active { color: #000; background-color: #f2f2f2; }
.account-menu > button:hover::before,
.account-menu > button:active::before { -webkit-transform: translateX(-0.05rem); -ms-transform: translateX(-0.05rem); transform: translateX(-0.05rem); }

/* 會員帳號創建 */
.account-add { -webkit-box-sizing: border-box; box-sizing: border-box; width: 6.8rem; padding: .4rem 1.1rem; }
.account-add-input:first-of-type { position: relative; width: 1.7rem; padding-right: .38rem; margin-right: .2rem; }
.account-add-input:first-of-type::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: .18rem;
    height: 0;
    border-top: .04rem solid #999;
    margin-top: auto;
    margin-bottom: auto;
    }
.account-add-input.ui-form-input > input { height: .6rem; font-size: .18rem; border-width: 2px; border-color: #e2e2e2; text-align: center; }
.account-add-input.ui-form-input > input:valid { color: #333; font-size: .3rem; font-weight: 600; }
.account-add-input.ui-form-input > input:focus { border-color: #282460; }
.account-add-bd > .ui-form-text { margin-top: .15rem; margin-bottom: .25rem; color: #666; }

/* 會員帳號綁定 */
.account-bind { width: 6.8rem; }
.account-bind-hd { border-bottom: 1px solid #dbdbdb; }
.account-bind-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding-top: .25rem; margin-bottom: -0.05rem; font-size: .18rem; font-weight: 400; }
.account-bind-title::before,
.account-bind-title::after {
    content: '';
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 0;
    margin-bottom: .05rem;
    border-bottom: 1px solid #dbdbdb;
    }
.account-bind-title::before { margin-right: .15rem; }
.account-bind-title::after { margin-left: .15rem; }
.account-bind-tab { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: .66rem; }
.account-bind-tab > li { display: block; height: 100%; margin-left: .38rem; }
.account-bind-tab > li:first-of-type { margin-left: 0; }
.account-bind-tab > li > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; color: #a1a1a1; font-size: .2rem; -webkit-transition: color .2s; -o-transition: color .2s; transition: color .2s; }
.account-bind-tab > li > a:hover,
.account-bind-tab > li > a:active,
.account-bind-tab > li.active > a { color: #3c359f; }

.account-bind-bd { padding: .4rem 1rem .45rem; }
.account-bind-bd > .ui-form-text { margin-top: .15rem; color: #666; text-align: center; }
.account-bind-input.ui-form-input { padding-left: .1rem; padding-right: .1rem; }
.account-bind-input.ui-form-input > input { height: .6rem; font-size: .18rem; border-width: 2px; border-color: #e2e2e2; text-align: center; }
.account-bind-input.ui-form-input > input:valid { color: #333; font-size: .3rem; font-weight: 600; }
.account-bind-input.ui-form-input > input:focus { border-color: #282460; }


/* 會員帳號查詢結果 */
.account-info.account-bind > .account-bind-bd { padding: .2rem .5rem .4rem; }

.account-meta > dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-left: 1.85rem; line-height: 2.5; white-space: nowrap; }
.account-meta > dl > dt { margin-right: .1rem; color: #999; font-weight: 600; }
.account-meta > dl > dd { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; }

.account-game { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: .2rem; }
.account-game-item { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 1rem; height: 1rem; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .1rem .08rem; margin-left: .2rem; overflow: hidden; -webkit-border-radius: .1rem; border-radius: .1rem; }
.account-game-item:first-of-type { margin-left: 0; }
.account-game-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    }
.account-game-item > .game-pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background: #eee center no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
    }
.account-game-item > .game-meta { color: #fff; font-size: .12rem; line-height: 1.2; opacity: 0; -webkit-transform: scale3d(1.5,1.5,1.5); transform: scale3d(1.5,1.5,1.5); -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; -o-transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s, -webkit-transform .2s; }
.account-game-item > .game-meta > strong { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; height: .16rem; padding-left: 2px; padding-right: 2px; line-height: .16rem; background-color: #3c359f; }
.account-game-item > .game-meta > em { display: block; width: 100%; margin-top: .05rem; margin-bottom: .1rem; font-style: normal; white-space: nowrap; }
.account-game-item > .game-meta > em:last-of-type { margin-bottom: 0; }

.account-game-item:hover::after,
.account-game-item:active::after,
.account-game-item:hover > .game-meta,
.account-game-item:active > .game-meta { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.account-tip { margin-top: .25rem; margin-bottom: .05rem; font-size: .34rem; font-weight: 600; text-align: center; }
.account-tip.error { color: #e91212; }

/* 會員帳號購買 */
.account-buy { width: 6.8rem; padding-bottom: .45rem; }
.account-buy-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding-top: .2rem; margin-bottom: .3rem; font-size: .18rem; font-weight: 400; }
.account-buy-title::before,
.account-buy-title::after {
    content: '';
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 0;
    margin-bottom: .05rem;
    border-bottom: 1px solid #dbdbdb;
    }
.account-buy-title::before { margin-right: .15rem; }
.account-buy-title::after { margin-left: .15rem; }

.account-buy-row.ui-form-row { padding-left: 1.1rem; padding-right: 1.1rem; margin-top: .2rem; }
.account-buy-row.ui-form-row .ui-form-select > select,
.account-buy-row.ui-form-row .ui-form-input > input { height: .44rem; }
.account-buy-button.ui-form-button { margin-top: .3rem; }
.account-buy-button.ui-form-button > button { height: .54rem; }
